<template>
	<view class="container-mineAuthentication">
		<header @click="$goPath(1)">
			<image src='https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/right-white.png'
				mode='aspectFit|aspectFill|widthFix' alt="" />
			<view>实名认证</view>
		</header>

		<section>
			<view class="sect-box">
				<view class="mineAuthentication-form">
					<view>
						<text>姓名</text>
						<input type="text" v-model="name" placeholder="请输入姓名" :disabled="isAuthenticate == 1 ? true : false">
					</view>

					<view class="din-regular">
						<text>身份证</text>
						<input type="text" v-model="idCardNo" placeholder="请输入身份证号" :disabled="isAuthenticate == 1 ? true : false">
					</view>

					<view class="din-regular">
						<text>银行卡号</text>
						<input type="number" v-model="bankCardNo" placeholder="请输入银行卡号"
							:disabled="isAuthenticate == 1 ? true : false">
					</view>
				</view>

				<view class="uploadImg-card">

					<!-- :readonly="isAuthenticate == 1 ? true : false" -->
					<u-upload action="https://youpindou.com:8083/doudougou/image/upload" @afterRead="afterReadIdCardFront"
						:maxCount="1" :disabled="isAuthenticate == 1 ? true : false">
						<image class="card-img" :src='idCardFront' alt="" v-if="idCardFront != ''" />
						<view class="card-upload" v-else>
							<image class="upload-bg"
								src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/idCard-front.png" alt=""
								mode='widthFix' />
							<text>身份证人像面</text>
							<view class="uoload-icon">
								<view>
									<image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/upload-icon.png"
										alt="" mode='widthFix' />
								</view>
							</view>
						</view>
					</u-upload>

					<u-upload @afterRead="afterReadIdCardOpposite" :maxCount="1" :disabled="isAuthenticate == 1 ? true : false">
						<image class="card-img" :src='idCardOpposite' alt="" v-if="idCardOpposite != ''" />
						<view class="card-upload" v-else>
							<image class="upload-bg"
								src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/idCard-reverse.png" alt=""
								mode='widthFix' />
							<text>身份证国徽面</text>
							<view class="uoload-icon">
								<view>
									<image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/upload-icon.png"
										alt="" mode='widthFix' />
								</view>
							</view>
						</view>
					</u-upload>
				</view>

				<view class='mineAuthentication-toast'>
					<view>提示:</view>
					<view>1.注意：北京银行、交行、邮储、平安（含原深发）、光大、兴业、浦发、东莞、中信、华夏、上海银行、农村信用合作社，以上银行卡暂不支持</view>
					<view>2.请填写真实信息并核对，如果填写信息有误请联系客服，客服电话：<text @click="handleCall('4009915775')">4009915775</text></view>
				</view>

				<view class='sect-btn' v-if="isAuthenticate != 1">
					<view @click="handleSubmit">
						{{ authenticateInfo.name ? '修改' : '提交' }}
					</view>
				</view>
				<view class='sect-btn' v-else>
					<view @click="$goPath(1)"> 返回 </view>
				</view>

			</view>
		</section>
	</view>
</template>
<script>
	import {
		getUserInfo
	} from '@/common/auth';
	export default {
		data() {
			return {
				userId: '',
				name: '',
				idCardNo: '',
				bankCardNo: '',
				idCardFront: '',
				idCardOpposite: '',
				authenticateInfo: '',
				isAuthenticate: 0,
			}
		},

		onShow() {
			this.getAuthenticate();
		},
		methods: {

			//查询认证数据
			async getAuthenticate() {
				let userInfo = getUserInfo()
				this.userId = userInfo.userId;
				await this.$request.userBankAuthenticate({
					userId: userInfo.userId
				}).then(res => {
					if (res.code == 200 && res.isSuccess) {
						if (res.data) {
							const {
								name,
								idCardFront,
								idCardOpposite,
								bankCardNo,
								idCardNo,
								isAuthenticate,
								updateNotes
							} = res.data;
							if (isAuthenticate == 2) {
								uni.showToast({
									title: updateNotes,
									icon: 'none'
								});
							};
							this.authenticateInfo = res.data;
							this.name = name;
							this.idCardNo = idCardNo;
							this.bankCardNo = bankCardNo;
							this.idCardFront = idCardFront;
							this.idCardOpposite = idCardOpposite;
							this.isAuthenticate = isAuthenticate;
						}
					}
				});
			},
			//图片上传 身份证人像面
			async afterReadIdCardFront(event) {
				let result = await this.$tools.uploadImage(event.file.url)
				this.idCardFront = result.data;
			},

			//图片上传 身份证国徽面
			async afterReadIdCardOpposite(event) {
				let result = await this.$tools.uploadImage(event.file.url)
				this.idCardOpposite = result.data;
			},

			//提交
			handleSubmit() {
				const {
					bankCardNo,
					idCardFront,
					idCardNo,
					idCardOpposite,
					name,
					userId
				} = this;

				const param = {
					bankCardNo,
					idCardFront,
					idCardNo,
					idCardOpposite,
					name,
					userId
				};

				this.$request.userBankEditAuthenticate(param).then(res => {
					if (res.code == 200 && res.isSuccess) {
						uni.showToast({
							title: '认证成功',
							icon: 'success'
						});
						this.getAuthenticate();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			handleCall(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				});
			},

		},
	}
</script>

<style lang="scss" scoped>
	.container-mineAuthentication {
		width: 100%;
		height: 100vh;
		font-size: 28rpx;
		font-family: 'PingFang SC-Medium';
		background-color: #FED14E;
		overflow-y: hidden;
		color: #333;

		header {
			width: 100%;
			padding: 100rpx 24rpx 80rpx;
			border-radius: 0 0 40rpx 40rpx;
			box-sizing: border-box;
			color: #fff;
			background-color: #32B499;
			background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/homeTopIcon.png');
			background-size: 100% auto;
			background-repeat: no-repeat;
			font-size: 36rpx;
			font-family: 'PingFang SC-Bold';
			display: flex;
			align-items: center;

			image {
				width: 16rpx;
				height: 28rpx;
				display: block;
				margin-right: 12rpx;
			}
		}

		section {
			height: 100%;
			position: relative;
			top: -50rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			overflow-y: auto;

			.sect-box {
				width: 100%;
				height: 100%;
				background-color: #fff;
				border-radius: 40rpx;
				padding: 24rpx;
				box-sizing: border-box;
				overflow-y: auto;

				.mineAuthentication-form {
					width: 100%;
					box-sizing: border-box;
					border-radius: 16rpx;
					background-color: #fff;
					padding: 0 24rpx;
					box-sizing: border-box;
					margin-bottom: 24rpx;

					view {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 20rpx 0;
						border-bottom: 1px solid rgba(241, 241, 241, 0.8);
						box-sizing: border-box;

						text {
							width: 160rpx;
						}

						input {
							flex: 1;
							border: 0;
							text-align: right;
							outline: none;
						}
					}

					view:last-child {
						border: 0;
					}

					.din-regular {
						input {
							font-family: 'DIN-Regular';
						}
					}
				}

				.uploadImg-card {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.card-img {
						width: 320rpx;
						height: 228rpx;
						display: block;
						border-radius: 20rpx;
					}

					.card-upload {
						width: 100%;
						height: 228rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						position: relative;
						color: #999999;

						.upload-bg {
							width: 320rpx;
							height: 228rpx;
							display: block;
							margin-bottom: 20rpx;
							border: 2rpx dashed #EFEFEF;
						}

						.uoload-icon {
							position: absolute;
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;

							view {
								width: 100rpx;
								height: 100rpx;
								background: rgba(0, 0, 0, 0.2);
								padding: 20rpx;
								box-sizing: border-box;
								border-radius: 50% 50%;

								image {
									width: 60rpx;
									height: 60rpx;
								}

							}
						}
					}

				}

				.mineAuthentication-toast {
					margin-top: 48rpx;
					font-family: 'PingFang SC-Regular';

					view {
						margin-bottom: 24rpx;
					}

					view:first-child {
						font-family: 'PingFang SC-Medium';
					}

					text {
						font-family: 'DIN-Regular';
						color: #32B499;
					}

				}

				.sect-btn {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					view {
						width: 90%;
						height: 80rpx;
						color: #fff;
						border-radius: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 30%;
						background-color: #32B499;
					}
				}


			}
		}
	}
</style>